<template>
	<div class="body">
		<div class="mine">
			<div class="my">
				<span>我的</span>
			</div>
			<div class="mymin">
				<div class="myimg" @click="person">
					<div>
						<img :src="obj.avatar" />
					</div>
					<div class="myname">
						<p>{{obj.nickname}}</p>
						<p>学号：{{obj.student_id}}</p>
					</div>
				</div>
				<div class="set">
					<img @click="set" src="../assets/homeimg/设置 (3).png" />
					<img @click="news" src="../assets/homeimg/消息.png" />
				</div>
			</div>
			<div class="zu" @click="toshare">
				<img src="../assets/homeimg/组 63.png" />
			</div>
			<div class="roommin">
				<div class="rooms">
					<div class="roomstop" @click="toMycourses">
						<div class="topimg">
							<img src="../assets/homeimg/设置 (3).png" />
							<span>我的课程</span>
						</div>
						<div class="text">更多 ></div>
					</div>
					<div class="roompadd">
						<div class="kctixing" @click="toRemind">
							<p>课程提醒</p>
						</div>
						<div class="xxbaogao" @click="toRecord">
							<p>课程记录</p>
						</div>
					</div>
				</div>
			</div>
			<div class="dmin">
				<div class="dflex" @click="toGroup">
					<div class="dfimg">
						<img src="../assets/homeimg/老师.png" />
					</div>
					<div class="dfneir">
						<span>我的老师</span>
						<span>></span>
					</div>
				</div>
				<div class="dflex" @click="toIntegral">
					<div class="dfimg">
						<img src="../assets/homeimg/积分.png" />
					</div>
					<div class="dfneir">
						<span>我的积分</span>
						<span>></span>
					</div>
				</div>
				<div class="dflex" @click="toAddress">
					<div class="dfimg">
						<img src="../assets/homeimg/address.png" />
					</div>
					<div class="dfneir">
						<span>我的地址</span>
						<span>></span>
					</div>
				</div>
				<div class="dflex" @click="feedback">
					<div class="dfimg">
						<img src="../assets/homeimg/意见反馈.png" />
					</div>
					<div class="dfneir">
						<span>意见反馈</span>
						<span>></span>
					</div>
				</div>
			</div>
		</div>
		<van-popup v-model="show" round position="bottom" :style="{ height: '80%' }">
			<div class="top">
				<span>意见反馈</span>
				<div class="ready" @click="add">完成</div>
			</div>
			<van-field v-model="message" rows="1" autosize type="textarea" maxlength="100" placeholder="说说你对我们产品的意见和建议吧（100字以内）" />
		</van-popup>
	</div>
</template>
<script>
	// import { Image } from "vant";
	import mineApi from "@/api/mine";
	// import { Toast } from "vant";
	export default {
		data() {
			return {
				show: false,
				message: "",
				// token: "",
				obj: {
					// nickname:''
				}
			};
		},
		components: {
			// [Image.name]: Image
		},
		created() {
			// this.obj = JSON.parse(JSON.stringify(window.userInfo));
			// this.$toast.success('iOSInfo');
			// this.token = this.obj.token;
			// localStorage.setItem("token", JSON.stringify(this.obj.token));
			// localStorage.setItem('userInfo', JSON.stringify(this.obj));
			// this.$toast.success({
			// 	message:localStorage.getItem("userInfo")
			// });
		},
		mounted() {

		},
		methods: {
			getuserInfo(value) {
				this.obj = value
			},
			// 意见反馈
			add() {
				if (localStorage.getItem("token")) {
					var token = JSON.parse(localStorage.getItem("token"));
				}
				mineApi.feedback({
					content: this.message,
					token: token
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.$toast.success("意见反馈成功!");
						this.message = '';
					}
				});

				this.show = false;
			},
			feedback() {
				this.show = true;
			},
			person() {
				this.$router.push("/profile");
			},
			set() {
				this.$router.push("/set");
			},
			toGroup() {
				this.$router.push("/myteacher");
			},
			toIntegral() {
				this.$router.push("/integral");
			},
			toMycourses() {
				this.$router.push("/mycourses");
			},
			toRemind() {
				this.$router.push("/remind");
			},
			toRecord() {
				this.$router.push("/mycourses");
			},
			news() {
				this.$router.push("/news");
			},
			toshare() {
				this.$router.push("/share");
			},
			toAddress() {
				this.$router.push("/address");
			}
		}
	};
</script>
<style lang="scss" scoped>
	body {
		width: 100%;
		height: 100%;

		.mine {
			height: 100%;
			padding-bottom: 7.5rem;
		}
	}

	.my {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
		color: #333333;
		font-size: 1.25rem;
		height: 3.125rem;
		line-height: 3.125rem;
		margin-left: 1.25rem;
		// margin-top: 0.625rem;
	}

	.mymin {
		flex: 1;
		display: flex;
		justify-content: space-between;
		padding: 0 1.75rem;
		align-items: center;
		margin-top: 3.75rem;

		.myimg {
			display: flex;
			align-items: center;

			.myname {
				margin-left: 0.75rem;

				p:nth-of-type(1) {
					color: #333333;
					font-size: 1.25rem;
					height: 2.25rem;
					line-height: 2.25rem;
				}

				p:nth-of-type(2) {
					color: #333333;
					font-size: 0.75rem;
				}
			}
		}

		.myimg img {
			width: 4.375rem;
			height: 4.375rem;
			border-radius: 50%;
		}

		.set img:nth-of-type(1) {
			width: 1.25rem;
			height: 1.25rem;
		}

		.set img:nth-of-type(2) {
			width: 0.9375rem;
			height: 1.25rem;
			margin-left: 1rem;
		}
	}

	.zu {
		width: 100%;
		margin: 0 auto;
		margin-top: 1.625rem;
	}

	.zu img {
		display: block;
		width: 22rem;
		height: 5rem;
		margin: 0 auto;
	}

	.roommin {
		height: 9.75rem;
		background: #f8f6f7;
		overflow: hidden;

		.rooms {
			height: 8.5rem;
			background: #fff;
			margin-top: 0.625rem;
			padding: 0 0.9375rem;
		}

		.roomstop {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 3.25rem;
			line-height: 3.25rem;
			color: #333333;
			font-size: 1rem;

			.topimg {
				display: flex;
				align-items: center;

				span {
					margin-left: 0.75rem;
				}
			}

			.topimg img {
				width: 1.625rem;
				height: 1.625rem;
			}
		}
	}

	.roompadd {
		display: flex;

		div {
			width: 10.375rem;
			height: 4.375rem;

			p {
				color: #333333;
				font-size: 1rem;
				height: 4.375rem;
				line-height: 4.375rem;
				margin-left: 0.75rem;
			}
		}

		.kctixing {
			background: url("../assets/homeimg/课程提醒.png") no-repeat;
			background-size: 100%;
			margin-right: 0.8125rem;
		}

		.xxbaogao {
			background: url("../assets/homeimg/学习报告.png");
			background-size: 100%;
		}
	}

	.dmin {
		padding: 0 0.875rem 0 1rem;

		.dflex {
			display: flex;
			height: 3.125rem;
			align-items: center;

			.dfimg {
				width: 1.375rem;
				height: 1.375rem;

				img {
					width: 1.375rem;
					height: 1.375rem;
				}
			}

			.dfneir {
				width: 100%;
				margin-left: 0.625rem;
				display: flex;
				height: 3.125rem;
				line-height: 3.125rem;
				justify-content: space-between;
				border-bottom: #dcdcdc 1px solid;
				color: #333333;
			}
		}
	}

	.top {
		width: 100%;
		height: 2.5rem;
		text-align: center;
		display: flex;
		// justify-content: center;
		border-bottom: 0.0625rem solid rgba(210, 210, 210, 1);

		span {
			font-size: 1.1875rem;
			font-weight: bold;
			margin-left: 9.375rem;
			color: rgba(51, 51, 51, 1);
			line-height: 2.1875rem;
		}

		.ready {
			width: 5.625rem;
			height: 1.75rem;
			margin-left: 2.5rem;
			background: rgba(243, 246, 251, 1);
			border-radius: 0.8125rem;
			line-height: 1.75rem;
			margin-top: 0.3125rem;
			font-size: 0.75rem;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
	}
</style>
